<template>

  <a-select
    :showSearch="true"
    :getPopupContainer = "getPopupContainer"
    :placeholder="placeholder"
    :disabled="disabled"
    :value="getValueSting"
    @change="handleInput">
    <a-select-option :value="undefined">请选择</a-select-option>
    <a-select-option v-for="(item, key) in dictOptions" :key="key" :value="item.value">
      <span style="display: inline-block;width: 100%" :title=" item.text || item.label ">
        {{ item.text || item.label }}
      </span>
    </a-select-option>
  </a-select>
</template>

<script>
  import { getAction  } from '@/api/manage'

  export default {
    name: "JSysDataApi",
    props: {
      dictCode: String,
      mainId: String,
      initId: String,
      dictWhere:{
        type:String,
        required:false,
        default:"",
      },
      placeholder: String,
      disabled: Boolean,
      value: [String, Number],
      type: String,
      getPopupContainer:{
        type: Function,
        default: (node) => node.parentNode
      },
      options:[],
    },
    data() {
      return {
        dictOptions: [],
        tagType:"select",
        url:'/yw/api/data/',
      }
    },
    watch:{
      dictCode:{
        immediate:true,
        handler(n) {
          this.initDictData();
        },
      },
      mainId:{
        immediate:true,
        handler(n) {
          if(n){
            this.initDictData();
          }

        },
      },
      initId:{
        immediate:true,
        handler(n) {
          if(n){
            this.initDictData();
          }
        },
      },
      dictWhere:{
        deep:true,
        immediate:true,
        handler(n) {
          if(n){
            this.initDictData();
          }
        },
      },
      options:{
        deep:true,
        handler(n) {
          if(n && this.dictOptions.length<=0){
            this.$set(this,'dictOptions',n)
            console.log(this.dictOptions)
          }
        },
      },
      value:{
        deep:true,
        handler(n) {
          if(n ){
            this.$emit('change', n);
          }
        },
      }
    },
    created() {
      //获取字典数据
      // this.initDictData();
    },
    computed: {
      getValueSting(){
        return this.value != null ? this.value.toString() : undefined;
      },
    },
    methods: {
      initDictData() {
        //console.log(this.dictCode)
        //根据字典Code, 初始化字典数组
        if(this.dictCode){
          // this.dictOptions= [];
          // this.$emit('change', '');
          console.log({id:this.mainId,initId:this.initId})
          getAction(this.url+this.dictCode,{id:this.mainId,initId:this.initId}).then(res=>{
            if(res.success){
              this.dictOptions = res.result;
            }else{
              this.$message.warning(res.message)
            }
          })
        }
      },
      handleInput(e='') {
        let val;
        if(Object.keys(e).includes('target')){
          val = e.target.value
        }else{
          val = e
        }
        //console.log(val);
        this.$emit('change', val);
      },
      setCurrentDictOptions(dictOptions){
        this.dictOptions = dictOptions
      },
      getCurrentDictOptions(){
        return this.dictOptions
      }
    },
    model:{
      prop: 'value',
      event: 'change'
    }
  }
</script>

<style scoped>
</style>